<template>
  <div class="person">
    <div>{{ person }}</div>
    <div>ref定义的obj对象{{ obj }}</div>
    <div>{{ personList }}</div>
    <div>ref定义的objList对象{{ objList }}</div>
  </div>
</template>
  <script setup lang='ts'>
  import {type PersonInter,type Persons} from '@/types'
  import { ref } from "vue";
  //一个人
  let person:PersonInter={id:"12345345345",name:"张山",age:28}
  let obj = ref<PersonInter>({
    id:"123",
    name:"ref定义对象",
    age:18
  })
  
  //多个人
  // //第一种
  // let personList:Array<PersonInter> = [
  //   {id:"12345345345",name:"张山",age:28},
  //   {id:"64356545645",name:"李四",age:21},
  //   {id:"54674567",name:"王五",age:45},
  // ]
  
  //第二种 - 引入Persons
  let personList:Persons = [
    {id:"12345345345",name:"张山",age:28},
    {id:"64356545645",name:"李四",age:21},
    {id:"54674567",name:"王五1",age:45},
  ]
  //第三种
  let objList = ref<PersonInter[]>(
  // let objList = ref<Persons>(
    [{id:"12345345345",name:"张山2",age:28},
    {id:"64356545645",name:"李四2",age:21},
    {id:"54674567",name:"王五2",age:45},]
  )
  
  setTimeout(()=>{
    person.age = 128;//可改变
    obj.value.age = 128;//可改变
  },1500)
  </script>
  <style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>